<template>
  <Card title="用户注册":bordered="false">
    <Form ref="registerForm":model="registerModel":rules="rules" @keydown.enter.native="register">
      <FormItem prop="newUserName">
        <Input v-model="registerModel.newUserName" type="text" placeholder="请输入用户名字" style="width: 260px" >
        <span slot="prepend">
            <Icon :size="20" type="ios-contact"/>
          </span>
        </Input>
      </FormItem>
      <FormItem prop="newPassword">
        <Input v-model="registerModel.newPassword" type="password" placeholder="请输入密码" style="width: 260px">
        <span slot="prepend">
            <Icon :size="20" type="md-lock"></Icon>
          </span>
        </Input>
      </FormItem>
      <FormItem prop="confirmPassword">
        <Input v-model="registerModel.confirmPassword" type="password" placeholder="确认密码" style="width: 260px">
        <span slot="prepend">
            <Icon :size="20" type="ios-lock-outline"></Icon>
          </span>
        </Input>
      </FormItem>
      <FormItem prop="dataSet">
        <Button type="primary" @click="register" long>注册</Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
    export default {
      name: "register-form",
      props: {
        newUserNameRules: {
          type: Array,
          default: () => {
            return [
              {required: true, message: '用户名不能为空', trigger: 'blur'},
            ]
          }
        },
        newPasswordRules: {
          type: Array,
          default: () => {
            return [
              {required: true, message: '密码不能为空', trigger: 'blur'}
            ]
          }
        },
        confirmPasswordRules: {
          type: Array,
          default: () => {
            return [
              {required: true, message: '确认密码不能为空', trigger: 'blur'}
            ]
          }
        },
      },
      data() {
        return {
          registerModel: {
            newUserName: '',
            newPassword: '',
            confirmPassword: ''
          }
        }
      },
      computed: {
        rules() {
          return {
            newUserName: this.newUserNameRules,
            newPassword: this.newPasswordRules,
            confirmPassword: this.confirmPasswordRules,
          }
        }
      },
      methods: {
        register() {
          if(this.registerModel.newUserName.length<6||this.registerModel.newUserName.length>20){
            alert("用户名长度不能小于6或大于20")
          }
          else{
            this.$router.push('/')
          }
        }
      }
    }
</script>

<style scoped>

</style>
